// 创建仓库步骤
// 第一步:
import { configureStore } from '@reduxjs/toolkit'
// 引入两个 子模块数据 
import shopReducer from './modules/shopReducer'
import userReducer from './modules/userReducer'

// +++
import { combineReducers } from "redux";
import { persistReducer, persistStore } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
const persistConfig = {
    key: 'root',
    storage: storage,  //指定存储到localstorage中
}
const persistedReducer = persistReducer(
    persistConfig,
    combineReducers({
        //数据切片
        user: userReducer,
        shop: shopReducer
    })
)

// const store = configureStore({
//     reducer: {
//         shop: shopReducer,
//         user: userReducer
//     }
// })

//++++
export const store = configureStore({
    reducer: persistedReducer,
    middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware({
            serializableCheck: false,
        }),
})
//++++
export const persistor = persistStore(store)


// 从 store 本身推断出 `RootState` 和 `AppDispatch` 类型
// RootState 表示仓库中的数据类型,因为这里如果给仓库中的state 定义了类型, 
// 那么在页面中使用useSelector 获取仓库数据的时候, const state = useSelector((state:类型)=>state)
export type RootState = ReturnType<typeof store.getState>
// 推断出类型: {posts: PostsState, comments: CommentsState, users: UsersState}
// 获取dispatch 的类型
export type AppDispatch = typeof store.dispatch


export default store